<script setup lang="ts">
import { ref } from 'vue'
import SideBar from './SideBar.vue'
import ImagePreprocessing from './MainArea/ImagePreprocessing.vue'

const draggedCamera = ref(null)
const droppedCamera = ref(null)
const curCamera = ref<any>(null)

// 组件引用
const imagePreprocessingRef = ref()

// 裁剪状态
const cropping = ref(false)

// 导出/清空/删除/预览
const saveResult = () => {
  imagePreprocessingRef.value?.saveCanvas()
}
const clearCanvas = () => {
  imagePreprocessingRef.value?.clearCanvas()
}
const deleteSelected = () => {
  imagePreprocessingRef.value?.deleteSelected()
}
const previewResult = () => {
  imagePreprocessingRef.value?.previewResult()
}

// 框选范围相关
const startCrop = () => {
  imagePreprocessingRef.value?.startCrop()
  cropping.value = true
}
const applyCrop = () => {
  imagePreprocessingRef.value?.applyCrop()
  cropping.value = false
}
const cancelCrop = () => {
  imagePreprocessingRef.value?.cancelCrop()
  cropping.value = false
}
</script>

<template>
  <div class="w-full h-full flex text-[#303133]">
    <div class="w-[30%] max-w-[440px] h-full bg-white/80">
      <SideBar v-model:camera="draggedCamera" />
    </div>
    <div class="flex-1 h-full p-6 flex flex-col scrollbarY">
      <div class="xl:mb-8 mb-3 text-sm font-bold flex justify-between items-center">
        <div>
          <span>图像拼接</span>
        </div>
        <div v-if="droppedCamera" class="flex gap-4">
          <a-button type="primary" @click="clearCanvas" :disabled="cropping">清空画布</a-button>
          <a-button type="primary" @click="deleteSelected" :disabled="cropping">删除选中</a-button>
          <a-button v-if="!cropping" type="primary" @click="startCrop">框选范围</a-button>
          <a-button v-if="cropping" type="primary" @click="applyCrop">应用裁剪</a-button>
          <a-button v-if="cropping" @click="cancelCrop">取消</a-button>
          <a-button type="primary" @click="previewResult" :disabled="cropping">预览</a-button>
          <a-button type="primary" @click="saveResult" :disabled="cropping">保存</a-button>
        </div>
      </div>
      <div class="bg-white border border-[#EAEDF7] flex-1 rounded-lg">
        <ImagePreprocessing
          ref="imagePreprocessingRef"
          v-model:dragged-camera="draggedCamera"
          v-model:dropped-camera="droppedCamera"
          v-model:curCamera="curCamera"
        />
      </div>
    </div>
  </div>
</template>

<style scoped></style>
